<template>
  <div class="login-container">
    <div class="legal-decoration">
      <div class="balance-icon">
        <svg viewBox="0 0 100 100">
          <path d="M50,10 L90,90 L10,90 Z" fill="#1a5fb4" opacity="0.2"/>
          <line x1="50" y1="15" x2="50" y2="85" stroke="#1a5fb4" stroke-width="3"/>
          <line x1="25" y1="50" x2="75" y2="50" stroke="#1a5fb4" stroke-width="3"/>
          <circle cx="35" cy="35" r="8" fill="#1a5fb4" opacity="0.5"/>
          <circle cx="65" cy="65" r="8" fill="#1a5fb4" opacity="0.5"/>
        </svg>
      </div>
      <div class="document-line" v-for="(line, index) in 5" :key="index"
           :style="{
             top: `${20 + index * 15}%`,
             left: `${25 + Math.random() * 50}%`,
             width: `${40 + Math.random() * 40}%`,
             height: '1px',
             opacity: 0.4 + Math.random() * 0.3
           }"></div>
    </div>

    <div class="login-card">
      <div class="login-header">
        <div class="logo">
          <svg viewBox="0 0 24 24">
            <path d="M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1Z" fill="#1a5fb4"/>
            <path d="M16,11H15V9H13V11H11V9H9V11H8V13H9V15H11V13H13V15H15V13H16V11Z" fill="white"/>
          </svg>
          <h1>法律援助平台</h1>
        </div>
        <p>维护公正 · 服务民生</p>
      </div>

      <div class="login-form">
        <div class="form-group">
          <label for="username">用户名</label>
          <input
              type="text"
              id="username"
              v-model="credentials.username"
              placeholder="请输入用户名"
              @keyup.enter="attemptLogin"
          >
          <span class="input-icon">
            <svg viewBox="0 0 24 24">
              <path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" fill="#1a5fb4"/>
            </svg>
          </span>
        </div>

        <div class="form-group">
          <label for="password">密码</label>
          <input
              type="password"
              id="password"
              v-model="credentials.password"
              placeholder="请输入密码"
              @keyup.enter="attemptLogin"
          >
          <span class="input-icon">
            <svg viewBox="0 0 24 24">
              <path d="M12,17C10.89,17 10,16.1 10,14C10,11.89 10.89,11 12,11C13.11,11 14,11.9 14,14C14,16.11 13.11,17 12,17M18,20V10H6V20H18M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V10C4,8.89 4.89,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z" fill="#1a5fb4"/>
            </svg>
          </span>
        </div>

        <div class="remember-forgot">
          <label class="remember">
            <input type="checkbox" v-model="rememberMe">
            <span>记住我</span>
          </label>
          <a href="#" class="forgot-password">忘记密码?</a>
        </div>

        <button class="login-btn" @click="attemptLogin">
          登录系统
        </button>

        <div class="legal-assistance">
          <p>需要法律援助？<router-link to="/register">用户注册</router-link></p>
        </div>
      </div>

      <div class="login-footer">
        <p>© 2023 法律援助平台 · 隐私政策 · 用户协议</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'

import {useAuthStore} from "@/stores/authStore.js";
import {ElMessage} from "element-plus";
const authStore = useAuthStore()

const router = useRouter()

// 用户凭证
const credentials = reactive({
  username: 'admin',
  password: 'Login987456'
})

// 记住我
const rememberMe = ref(false)

// 登录模拟功能
const attemptLogin =  async () => {
  if (!credentials.username || !credentials.password) {
     ElMessage.warning('请输入用户名和密码')
    return
  }
  console.log('登录信息：', {
    username: credentials.username,
    remember: rememberMe.value
  })

  const user = {
    username: credentials.username,
    password: credentials.password
  }
 await authStore.login(user)
  // 登录成功后跳转到系统首页
  router.push('/')
}
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f9ff 0%, #e8f0fe 100%);
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.legal-decoration {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.balance-icon {
  position: absolute;
  top: 15%;
  left: 10%;
  width: 180px;
  height: 180px;
  opacity: 0.08;
}

.document-line {
  position: absolute;
  background-color: #1a5fb4;
}

.login-card {
  width: 100%;
  max-width: 420px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0, 36, 80, 0.12);
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.login-header {
  background: linear-gradient(to right, #1a5fb4, #1e78cd);
  color: white;
  padding: 40px 30px 30px;
  text-align: center;
}

.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 15px;
}

.logo svg {
  width: 60px;
  height: 60px;
  margin-bottom: 15px;
}

.logo h1 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin: 0;
}

.login-header p {
  font-size: 14px;
  opacity: 0.9;
  margin: 8px 0 0;
}

.login-form {
  padding: 30px;
}

.form-group {
  position: relative;
  margin-bottom: 25px;
}

.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #2c3e50;
  margin-bottom: 8px;
}

.form-group input {
  width: 100%;
  padding: 14px 15px 14px 46px;
  border: 1px solid #e0e6ed;
  border-radius: 6px;
  font-size: 15px;
  transition: all 0.3s;
  background-color: #f9fbfd;
}

.form-group input:focus {
  outline: none;
  border-color: #1a5fb4;
  box-shadow: 0 0 0 3px rgba(26, 95, 180, 0.15);
}

.input-icon {
  position: absolute;
  left: 14px;
  top: 42px;
  transform: translateY(-50%);
}

.input-icon svg {
  width: 22px;
  height: 22px;
}

.remember-forgot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  margin-bottom: 25px;
}

.remember {
  display: flex;
  align-items: center;
  color: #5a6c83;
}

.remember input {
  margin-right: 8px;
  accent-color: #1a5fb4;
}

.forgot-password {
  color: #1a5fb4;
  text-decoration: none;
  font-weight: 500;
}

.forgot-password:hover {
  text-decoration: underline;
}

.login-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(to right, #1a5fb4, #1e78cd);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 10px rgba(26, 95, 180, 0.25);
}

.login-btn:hover {
  background: linear-gradient(to right, #164b9d, #1a5fb4);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(26, 95, 180, 0.35);
}

.legal-assistance {
  text-align: center;
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid #eee;
  font-size: 14px;
  color: #5a6c83;
}

.legal-assistance a {
  color: #1a5fb4;
  font-weight: 500;
  text-decoration: none;
}

.legal-assistance a:hover {
  text-decoration: underline;
}

.login-footer {
  padding: 20px;
  text-align: center;
  font-size: 12px;
  color: #7a8ca5;
  border-top: 1px solid #f0f3f7;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .login-card {
    max-width: 90%;
  }

  .login-header {
    padding: 30px 20px 25px;
  }

  .login-form {
    padding: 25px 20px;
  }

  .logo svg {
    width: 50px;
    height: 50px;
  }

  .logo h1 {
    font-size: 21px;
  }
}
</style>